<template>
  <div>
    <!-- 直接使用三级联动的全局组件 -->
    <!--右侧导航 -->
    <TypeNav />
    <!-- 左侧轮播图和分类 -->
    <ListContainer />
    <!-- 今日推荐 -->
    <Recommend />
    <!-- 商品排行 -->
    <Rank />
    <!-- 猜你喜欢 -->
    <Like />
    <!-- 楼层1 -->
    <!-- 遍历得到的数据，将对应数据传给flooer组件 -->
    <Floor v-for="flooer in flooerList" :key="flooer.id" :list='flooer'/>
    <!-- 商标 -->
    <Brand />
  </div>
</template>

<script>
import ListContainer from "./ListContainer";
import Rank from "./Rank";
import Recommend from "./Recommend";
import Like from "./Like";
import Floor from "./Floor";
import Brand from "./Brand";
import { mapState } from 'vuex';
export default {
  name: "Home",
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand,
  },
  mounted() {
    //flooerList里存放了两个Flooer组件的数据，因此要在他们的父组件里获取
    this.$store.dispatch("getflooerList");
  },
  computed: {
    ...mapState({
      flooerList: (state) => state.home.flooerList,
    }),
  },
};
</script>

<style>
</style>